<template>
	<view class="fun-flex-col page">
		<uni-nav-bar class="nav-bar" background-color="#F6F6F6" height="108rpx" :fixed="true" status-bar :border="false" @clickRight='loginOut'>
			<text slot="left" class="left">More</text>
			<text slot="right" class="right">Sign Out</text>
		</uni-nav-bar>
		
		<view class="list-wrap">
			<view class="fun-flex-col group_2" v-for="item in list" :key="item.value">
				<text class="fun-self-start font text_4">{{item.label}}</text>
				<view class="fun-flex-row equal-division">
					<view class="fun-flex-col fun-items-center equal-division-item"
						:class="idx == 1 ? 'middle' :'between'"
						v-for="(ele,idx) in item.children"
						:key="ele.path"
						@click="toDetail(ele)"
					>
						<image class="icon" :src="ele.icon" />
						<text class="item-name fun-mt-10">{{ele.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {logout} from "@/api/common.js"
	import {withdrawalAddress} from "@/api/account.js"
	export default {
		data() {
			return {
				list:[
					{
						label:"Personal",
						value:"personal",
						children:[
							{name:"Settings",path:"setting",icon:require("@/static/more/set.png")},
							{name:"Transaction Records",path:"transaction",icon:require("@/static/more/transaction.png")},
							{name:"Address",path:"unBindAddress",icon:require("@/static/more/address.png")},
						],
					},
					
					{
						label:"Discover",
						value:"discover",
						children:[
							{name:"Notifications",path:"notifications",icon:require("@/static/more/notifications.png")},
							{name:"Insights",path:"insight",icon:require("@/static/more/insights.png")}
						],
					},
					
					{
						label:"Contact",
						value:"contact",
						children:[
							{name:"Contact Us",path:"contactUs",icon:require("@/static/more/contact.png")},
							{name:"About Us",path:"aboutUs",icon:require("@/static/more/about.png")}
						],
					}
				],
				queryData:{
					currency:"usdttrc20"
				}
			};
		},

		methods: {
			toDetail(ele){
				if(ele.name == "Address"){
					this.getWithdrawalAddress()
				}else{
					uni.navigateTo({url:`/pages/more/${ele.path}`})
				}
			},
			getWithdrawalAddress(){
				withdrawalAddress(this.queryData).then(res => {
					if(res.code == 0){
						this.address = res.data?.address || '';
						if(this.address){
							uni.navigateTo({url:`/pages/more/hasBindAddress?address=`+encodeURIComponent(this.address)})
						}
						else{
							uni.navigateTo({url:`/pages/more/unBindAddress`})
						}
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			loginOut(){
				uni.showModal({
					title: '提示',
					content: '是否退出登录',
					success:(res) => {
						if (res.confirm) {
							this.submitOut()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			submitOut(){
				logout().then(res => {
					getApp().globalData.regMustProxyCode = "";
					getApp().globalData.openMemberRegister = "";
					uni.clearStorageSync();
					uni.reLaunch({
						url: '/pages/login/login'
					})
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.nav-bar{
			::v-deep .uni-navbar__header{
				padding: 0 32rpx;
				.left{
					font-weight: 600;
					font-size: 48rpx;
					line-height: 56rpx;
				}
				.right{
					font-weight: 600;
					font-size: 28rpx;
					color: #CA5456;
					line-height: 32rpx;
				}
			}
		}
		.list-wrap{
			padding: 28rpx 76rpx 0;
		}
		.font {
			font-size: 36rpx;
			font-family: SF Pro Display;
			color: #000000;
		}

		.text_4 {
			margin-bottom: 40rpx;
		}
		.group_2 {
			.equal-division {
				width: 100%;
				.equal-division-item {
					.item-name{
						text-align: center;
						font-size: 28rpx;
						font-family: SF Pro Display;
						color: #000000;
					}
				}
				.between{
					flex:0.3
				}
				.middle{
					flex:0.4
				}
			}

			.icon {
				width: 96rpx;
				height: 96rpx;
			}
		}
		.group_2:not(:last-child){
			margin-bottom: 60rpx;
		}
	}
</style>